<template>
	<view style="overflow-x: hidden;" v-if="orderInfo">
		<view class="nav-back">
			<top-heigth backTitle="订单确认"></top-heigth>
		</view>
		
		<uv-picker ref="picker" :columns="subway" @confirm="confirm"></uv-picker>
		
		<view class="content-box">
			<view class="public-box m-b16 m-t16">
				
				<!-- 已选地址 -->
				<view class="address-add2"  >
					<view class="address-add2-font"> {{orderInfo.userAddress}}</view>
					<view class="font-hui">
						<span class="m-r16">{{orderInfo.userName}}</span>
						<span>{{orderInfo.userMobile}}</span>
					</view>
				</view>
			</view>
			
			<view class="public-box m-b16 m-t16" v-if="orderInfo">
				<view class="order-list">
					<view class="title">商品信息</view>
					<view class="order-list-r" @click="goMore()">
					   <view class="order-list-font-hui">更多</view>
					   <uv-icon size="20" name="/static/image/more.png"></uv-icon>
					</view>
				</view>
				<view class="goods-box">
					<view class="goods order-confirm">
						<view class="img-box">
							<image class="img" :src="tAppServiceVo.serviceImage" mode="aspectFit"></image>
						</view>
						<view class="goods-font">
							<h1 class="goods-h1">{{tAppServiceVo.serviceName}}</h1>
							<view class="font-bottom">
								<view class="font-bottom-l">
									<view class="red">
										<span class="goods-span-red">¥</span>{{tAppServiceVo.serviceAmount}}
									</view>
									<!-- <view class="grey">¥{{orderInfo.tAppServiceVo.serviceOldAmount}}</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="public-box">
				<view>
					<view class="order-list">
						<view class="title">服务人员</view>
						<view class="order-list-r" @click="goPeople()">
					
							<view  class="order-icon-choose">
								<view class="order-choose-img">
									<image src="/static/image/photo_gril.png" mode=""></image>
								</view>
								<span>{{orderInfo.tAppStaffVo.staffName}}</span>
							</view>
						</view>
					</view>
					
					<view class="order-list">
						<view class="title">优惠券</view>
						<view class="order-list-r" @click="goSelectCoupon">
							<!-- 未选之前 -->
							<view v-if="!couponInfo" class="order-list-font-hui">请选择</view>
							<!-- 选中后 -->
							<view v-else class="order-icon-choose">
								<span class="order-red">-¥{{couponInfo.tAppCouponVo.couponAmount}}</span>
							</view>
							<uv-icon size="20" name="/static/image/more.png"></uv-icon>
						</view>
					</view>
				
					
					
				
				</view>
			</view>
			
		</view>
		
		<view class="goods-buy">
			<view class="goods-buy-box">
				<view class="goods-buy-icon">
					<span>合计：</span>
					<view class="red">
						<span class="goods-span-red">¥</span>{{totalPrice}}
					</view>
				</view>
				<view class="goods-buy-red" @click="goPay()">去支付</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import { checkLogin } from "@/util/checkLogin.js"
	
	export default {
		data() {
			return {
				backTitle:"订单确认",
				serviceId: 0,
				serverInfo: null,
				staffId: 0,
				staffInfo: null,
				userInfo: uni.getStorageSync('userInfo'),
				address: null,
				couponInfo: null,
				serviceReservedTime: null,
				remark: '',
				wayType: 1,
				subway: [
					['出租车'] // '地铁公交'
				],
				subwayDesc: '',
				wayInfo: null,
				totalPrice: 0,
				parentStaffId: 0,
				orderInfo:null,
				tAppServiceVo:null,
				id:''
			}
		},
		components: { TopHeigth },
		onLoad(e) {
			checkLogin(() => {
				this.id = e.id;
				this.getOrder();
				
			// 	// 获取默认地址
			// 	uni.$u.http.post('/api/shop/v1_0/tAppUserAddressRCA/queryTAppUserAddress',{
			// 		appUserId: this.userInfo.id,
			// 	}).then((res) => {
			// 		 if(res.aaData){
			// 			 this.address = res.aaData[0]
			// 			 this.jiaotongAmount()
			// 		 }
			// 	})
			// 	// 获取服务
			// 	uni.$u.http.post('/api/shop/v1_0/tAppServiceRCA/turnTAppServiceInfo',{
			// 		id: this.serviceId
			// 	}).then((res) => {
			// 		 this.serverInfo = res.data
			// 		 this.initPrice()
			// 	})
				
			// 	// 获取服务人员
			// 	if(this.staffId > 0){
			// 		uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
			// 			id: this.staffId
			// 		}).then((res) => {
			// 			this.staffInfo = res.data
			// 		})
			// 	}
			})
		},
		onShow() {
			uni.$once('selectService', (tAppServiceVo) => {
				this.tAppServiceVo = tAppServiceVo
				this.serverInfo = tAppServiceVo
				this.initPrice()
				
			})
			uni.$once('selectAddress', (address) => {
				this.address = address
				this.wayType = 1
				this.jiaotongAmount()
			})
			uni.$once('selectDate', (time) => {
				this.serviceReservedTime = time
				this.jiaotongAmount()
			})
			uni.$once('selectCoupon', (coupon) => {
				// 验证满减
				if(this.serverInfo.serviceAmount < coupon.tAppCouponVo.couponLimitAmount){
					return this.$refs.uToast.show({
						type: 'default',
						message: "未达到满减条件",
					})
				}
				this.couponInfo = coupon
				this.initPrice()
			})
			uni.$once('selectStaff', (staff) => {
				this.staffId = staff.id
				this.staffInfo = staff
				this.wayType = 1
				this.jiaotongAmount()
			})
		},
		methods: {
			openPicker() {
				this.$refs.picker.open();
			},
			goMore(){
				uni.navigateTo({
					url:"/pages/order/moreService?id=" + this.orderInfo.staffId
				})
			},
			getOrder(type) {
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/turnTAppOrderInfo',{
						id: this.id
				}).then((res) => {
					this.orderInfo = res.data
					this.tAppServiceVo = res.data.tAppServiceVo
					this.serverInfo = res.data.tAppServiceVo
					this.initPrice()
				}) 
			},
			confirm(e) {
				this.wayType = e.indexs[0] + 1
				this.jiaotongAmount()
			},
			goPay(){
				if(!this.serverInfo.id){
					return uni.showToast({
						title: "缺少服务",
						icon: 'none'
					})
				}
		
			
			
				// 去支付
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/addTimeOrder',{
					addOrderId:this.orderInfo.id,
					serviceId:this.serverInfo.id,
					supplierId: this.orderInfo.supplierId,
					staffId:this.orderInfo.staffId,
					parentStaffId: this.orderInfo.parentStaffId,
					couponId: this.couponInfo ? this.couponInfo.tAppCouponVo.id : null,
					couponUserId: this.couponInfo ? this.couponInfo.id : null,
					// serviceReservedTime: this.serviceReservedTime,
					userName: this.orderInfo.userName,
					userMobile: this.orderInfo.userMobile,
					addressId: this.orderInfo.addressId,
					userAddress: this.orderInfo.userAddress,
					userLng: this.orderInfo.userLng,
					userLat: this.orderInfo.userLat,
					orderRemark: this.orderInfo.orderRemark,
					// postAmount: this.wayInfo.amount,
					// postType: this.wayType,
					
				}).then((res) => {
					if(res.code != 200){
						return uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					uni.navigateTo({
						url:"/pages/order/twoPay?code=" + res.data.orderCode
					})
				})
			},
			// goAddress(){
			// 	uni.navigateTo({
			// 		url:"/pages/order/address?sign=1"
			// 	})
			// },
			// goSelectTime(){
			
			// 	uni.navigateTo({
			// 		url:"/pages/order/time?staff=" + this.staffInfo.id
			// 	})
			// },
			goPeople(){
			
				uni.navigateTo({
					url:"/pages/order/people?sid=" + this.serviceId + "&aid=" + this.address.id
				})
			},
			goSelectCoupon(){
				uni.navigateTo({
					url:"/pages/mine/myCoupon?sign=1"
				})
			},
			// // 计算交通费
			// jiaotongAmount(){
			// 	if(!this.address || !this.staffId){
			// 		return;
			// 	}
			// 	uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/postAmountV2',{
			// 		postType: this.wayType,
			// 		userLat: this.address.lat,
			// 		userLng: this.address.lng,
			// 		staffId: this.staffId,
			// 		serviceReservedTime: this.serviceReservedTime
			// 	}).then((res) => {
			// 		this.wayInfo = res.data
			// 		if(this.wayInfo.hasSubWay){
			// 			this.subway = [
			// 				['出租车', '地铁公交']
			// 			]
			// 		}else{
			// 			this.subway = [
			// 				['出租车']
			// 			]
			// 		}
			// 		this.subwayDesc = this.wayInfo.desc
			// 		this.initPrice()
			// 	})
			// },
			initPrice(){
				this.totalPrice = this.tAppServiceVo.serviceAmount*1;
				if(this.couponInfo){
					this.totalPrice = this.totalPrice - this.couponInfo.tAppCouponVo.couponAmount*1
				}
				if(this.wayInfo){
					this.totalPrice = this.totalPrice + this.wayInfo.amount*1
				}
				this.totalPrice = (this.totalPrice*1).toFixed(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/common/css/public.scss";
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.detail-font{
		@include flex;
		align-items: center;
		justify-content:space-between;
		font-size: 24rpx;
		margin-bottom: 32rpx;
		.left{
			color: #999999;
		}
		.right{
			color: #333;
		}
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.address-add{
		@include flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 30rpx;
		color: #333;
	}
	.address-add2{
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		.address-add2-font{
			margin-bottom: 20rpx;
		}
	}
	.order-confirm{
		padding: 0 !important;
		.img-box{
			width:120rpx;
			height: 120rpx;
			border-radius:20rpx;
			margin-right: 24rpx;
			overflow: hidden;
			.img{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	
	.order-list{
		width: 100%;
		@include flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		.font{
			font-size: 30rpx;
			color: #333333;
		}
	}
	.order-list-r{
		@include flex;
		align-items: center;
		justify-content: end;
		font-size:28rpx;
	}
	.order-list-font-hui{
		font-size:28rpx;
		color: #999;
	}
	.text-box{
		background: #F8F8F8;
	}
	
	
	.goods-buy{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 10rpx 30rpx 5rpx rgba(0,0,0,0.5);
		
	}
	.goods-buy-box{
		height: 100rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.goods-buy-red{
		background:#EB0C00;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		width: 284rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
	}
	.goods-buy-icon{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size:20rpx;
		color: #555252;
		.red{
			color: #F82727;
			font-size: 34rpx;
			font-weight: bold;
			margin-right: 16rpx;
		}
		
	}
	.order-icon-choose{
		@include flex;
		align-items: center;
		justify-content: end;
		font-size: 28rpx;
		.order-choose-img{
			display: flex;
			align-items: center;
			justify-content: center;
			width:40rpx;
			height: 40rpx;
			border-radius: 40rpx;
			overflow: hidden;
			margin-right: 16rpx;
			image{
				width:40rpx;
				height: 40rpx;
			}
		}
	}
	.order-yellow{
		color: #FF7C21;
		margin-left:10rpx;
		font-size: 28rpx;
	}
	.order-red{
		color: #EB0C00;
		font-size: 28rpx;
	}
</style>
